<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	body{
		font-size: 9pt;
	}
	
	#panel1{
		border: 1px #000000 solid;
		line-height: 400px;
		font-size: 100px;
		width: 400px;
		height: 400px;
		text-align: center;
		vertical-align: middle;
	}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
	var labTotal;
	var panel;
	var number=0;
	var timerId;
	$(document).ready(function(){
		init();
		setEvent();
	});
	var init=function(){
		labTotal = $("#lab_total");
		panel = $("#panel1");
		timerId=0;
	}
	
	var setEvent=function(){
		$("#btn_start").click(function(){
			setTimer();
		});
		
		$("#btn_stop").click(function(){
			stopTimer();
		});
	}
	function print(){
		var tmpNum = random(labTotal.val());
		panel.html(tmpNum);
	}
	function setTimer(){
		 timerId = setInterval(print,20);
	}
	
	function stopTimer(){
		if(timerId !== 0)
			clearInterval(timerId);
	}
	var random = function(num){
		return Math.round(Math.random()*num);
	}
</script>
</head>
<body>
	<div> 
		<h4>경품추첨기-ver 0.1</h4>
		<div id="panel1" > 	
		</div>

		<div id="nav">
			참여인원 : <input type="text" id="lab_total" value="100"></input>
			<button id="btn_start">시작</button>
			<button id="btn_stop">멈춤</button>
		</div>
   </div>

</body>
</html>